<template lang="html">
  <div class="container">
      <div class="search">
            <el-button type="primary" size="small" @click="onHandleAdd">新增</el-button>
            <el-button type="danger" :disabled="isDisabled" size="small" @click="onDelete">批量删除</el-button>
      </div>

      <div class="tables" v-loading="loading">
        <el-table :data="tableData" :row-class-name="rowStyle" @selection-change="handleSelectionChange" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="roleName" label="角色名称" align="center" width="200"></el-table-column>
              <el-table-column prop="content" label="角色描述" align="center"></el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="fEditor(scope.row)">编辑</el-button>
                      <el-button type="danger" size="mini" @click="fDelete(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
        </el-table>
        <!-- <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" /> -->
      </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      tableData: [],
      currentData: [],
      newForm: {},
      currentPage: 1,
      totalPage: 100,
    }
  },
  computed:{
    isDisabled:function() {
      return this.currentData.length>0?false:true;
    }

  },
  created(){
    this.selectRoleList()
  },
  methods:{
    async selectRoleList(){
      this.loading = true;
      let res = await this.$http.selectRoleList();
      if(res.data.code == 0){
        this.tableData = res.data.data;
      }
      this.loading = false;
    },
    rowStyle({row,rowIndex}) {
      for(let i=0;i<this.currentData.length;i++){
        if(rowIndex == this.currentData[i].id){
          return 'row_style';
        }
      }
    },
    handleSelectionChange(e){
      this.currentData = [];
      this.currentData = this.currentData.concat(e);
    },
    onDelete(){
      let aId = [];
      this.currentData.forEach(item=>{aId.push(item.id)});
      this.$confirm('您确定要删除这些角色吗？').then(res=>{
        return this.$http.deleteRoles({ids:aId.join(',')})
      }).then(res=>{
        if(res.data.code == 0){
          this.$message.success('删除成功');
        }else{
          this.$message.error(res.data.message);
        }
        this.selectRoleList();
      }).catch(e=>0);
    },
    fDelete(e){
       this.$confirm('您确定要删除此角色吗？').then(res=>{
          this.$http.deleteRole({id:e.id}).then(res=>{
              if(res.data.code == 0){
                this.$message.success('删除成功');
              }else{
                this.$message.error(res.data.message);
              }
              this.selectRoleList();
          })
      }).catch(e=>0)
    },
    onSwitch(e){
      this.$http.closeRole({id: e.id,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    },
    fEditor(e){
      this.$router.push({path: '/system/role/add_role',query:{id:e.id}})
    },
    onHandleAdd(){
      this.$router.push('/system/role/add_role')
    },
  }
}
</script>

<style lang="css" scoped>
/deep/.el-table .row_style{
  background-color: #f8f8f8 !important;
}
.search{
  margin-bottom: 10px;
}
.form i{
  font-style: normal;
  color: #FB3F3F;
}
.form  .form_item{
  display: flex;
  line-height: 40px;
}
.form .radio_box{
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
}
.form  .form_item span{
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 20px;
}
</style>
